<template>
	<div class="mobile_home">
		<!-- 轮播图区域 -->
		<div class="banner">
			 <el-carousel :interval="5000" arrow="nerver" height="10rem">
			    <el-carousel-item v-for="item in bannerlist" :key="item.id">
			      <img :src="`${$ip}/api/public/showimg/${item.picture}`"/>
			    </el-carousel-item>
			  </el-carousel>
		</div>
		<!-- 传递的数据如果是固定的字符串，那么不需要v-bind指令 -->
			<MobileHomeList proptitle="热门推荐" :proplist="hotlist"></MobileHomeList>
			<MobileHomeList proptitle="新书上市" :proplist='newslist' style="margin-bottom: 5.5rem;"></MobileHomeList>
	</div>
</template>

<script>
import MobileHomeList from '@/components/mobile/home/MobileHomeList.vue'

export default {
	name:'MobileHome',
	components:{
		MobileHomeList,
	},
	data(){
		return{
			hotlist:[],
			newslist:[],
			bannerlist:[],
		}
	},
	computed:{
	        HotBanner(){
	            this.bannerlist.sort((a1,a2)=>{
	                return a2.hot-a1.hot;
	            })
	            // forEach/for..in/for..of：都是可以再需要限制输出的数据数量模块使用
	            // map：基本确定不会更改数组的长度，只不过数据的内容发生格式化的改变
	            let arr =[];
	            this.bannerlist.forEach((item,i)=>{
	                if(i<4){
	                    arr.push(item)
	                }
	            })
	            return arr;
	        }
	},
	mounted(){
		// 轮播图/热门推荐
		this.$get("/api/public/findHot/1/5").then((resp)=>{
			this.bannerlist =resp.data.data;
			console.log(this.bannerlist);
		})
		// 热门书籍
		// this.$get("/api/adm/hot/findAll").then((resp)=>{
		// 	this.hotlist =resp.data.data;
		// 	console.log(this.hotlist);
		// })
		this.$get("/api/public/findHot/1/5").then((resp)=>{
			this.hotlist =resp.data.data;
			console.log(this.bannerlist);
		})
		//新书上市
		this.$get("/api/public/findPageBook/1/12/0").then((resp)=>{
			this.newslist =resp.data.data.books;
			console.log(this.newslist);
		})
	}
}
</script>

<style scoped>
.mobile_home{
    background-color: #f5d5a0;
    position: relative;
    top: 3.5rem;
}
.banner{
    width: 100%;
    height: 10rem;
    margin-bottom: 1rem;
}
.banner img{
    width: 100%;
    height: 100%;
}
/* 穿刺：CSS用于修改固定组件样式的操作 */
.banner .el-carousel /deep/ .el-carousel__button{
    height: 0.3125rem !important;
}
.banner .el-carousel /deep/ .is-active .el-carousel__button{
    background-color: #a68b5b !important;
}
</style>
